import React, { Component } from 'react'
import styles from './Recommend.module.scss'
import {withRouter} from 'react-router-dom'

class Recommend extends Component {
  state = {
    recommendList: []
  }
  componentDidMount(){
    this.setState({
      recommendList:this.props.recommendList
    })
  }
  handleClick=() => {
    let arr = this.props.recommendList.templateList
    arr.sort(randomSort);
    function randomSort(a, b) { return Math.random() > 0.5 ? -1 : 1; }
    this.setState({
      recommendList:arr
    })
  }
  handleChange=(id) => {
    this.props.history.push('detailed/'+id)
  }
  
  render() {
    return (
      <div className={styles.Recomm}>
        <div className={styles.title}>
          <div>{this.props.title}</div>
          {this.props.right?<span onClick={this.handleClick}>换一换</span>:''}
        </div>
        <div className={styles.items}>
          {this.props.recommendList && (this.props.recommendList.templateList||this.props.recommendList).map((v,i) => {
            if(i<3){
              return <div key={v.id} className={styles.item}>
              <img src={v.imgUrl} alt="" onClick={this.handleChange.bind(this,v.id)}/>
              <div>{v.name}</div>
              <p>{v.authorName}</p>
            </div>
            }
          })}
        </div>
      </div>
    )
  }
}
export default withRouter(Recommend);
